import { Component, Prop, Vue } from 'vue-property-decorator'
import { deleteOneRole } from '@/api/permission'

import '@/components/roles/Label.css'

export type tag = Array<{id:number, name:string, label:string}>
export interface roleChildren {
  authName:string
  children:Array<roleChildren>
  id:number
  path:string
}

@Component
export default class LabelRoles extends Vue {
  public label:Array<string> = ['success', 'info', 'warning', 'danger']

  public tagArr:tag = []

  @Prop()
  id?:number

  @Prop()
  permissions?:Array<roleChildren>

  created () {
    if (this.permissions) { this.ro(this.permissions) }
  }

  open (
    smg = '登陆成功',
    type: 'success' | 'warning' | 'info' | 'error' = 'success'
  ) {
    this.$message({
      message: smg,
      type: type
    })
  }

  outer (id:number) {
    return async () => {
      try {
        await this.$confirm('是否删除')
        if (!this.id) return
        const { meta: { status, msg } } = await deleteOneRole(this.id, id)
        this.open(msg, status === 200 ? 'success' : 'error')
        this.$emit('toRender')
      } catch (error) {

      }
    }
  }

  ro (data:Array<roleChildren>, hierarchy = 0) {
    data.forEach(item => {
      const obj = {
        id: item.id,
        name: item.authName,
        label: this.label[Math.floor(Math.random() * 5)]
      }
      this.tagArr.push(obj)
      if (item.children instanceof Array) this.ro(item.children)
    })
  }

  render () {
    return (
      <div>
        {
          this.permissions?.map(item => (
            <el-row>
              <el-col span={4}>
                <el-row>
                  <el-tag
                    key={item.id}
                    onClose={this.outer.bind(this)(item.id)}
                    closable
                    type={'success'}>
                    {item.authName}
                  </el-tag>
                </el-row>
              </el-col>
              <el-col span={20}>
              {
                item.children && item.children.map(item2 => (
                  <el-row offset={4}>
                    <el-col span={4}>
                      <el-row>
                        <el-tag
                          key={item2.id}
                          onClose={this.outer.bind(this)(item2.id)}
                          closable
                          type={'danger'}>
                          {item2.authName}
                        </el-tag>
                      </el-row>
                    </el-col>
                    <el-col span={20}>
                      {
                        item2.children && item2.children.map(item3 => (
                          <el-col span={4}>
                            <el-tag
                              key={item3.id}
                              onClose={this.outer.bind(this)(item3.id)}
                              closable
                              type={'warning'}>
                              {item3.authName}
                            </el-tag>
                          </el-col>
                        ))
                      }
                    </el-col>
                  </el-row>
                ))
              }
              </el-col>

            </el-row>
          ))
        }
      </div>
    )
  }
}
